body {
    /* background: url('../assets/goku.png'); */
    /* background-size: cover; */
    display: flex;
    font-family: sans-serif;
    justify-content:center;
    margin: 0;
  }
  .dots {
    display: flex;
    margin-top: 30px;
    padding: 10px;
  }
  .cut {
    clip-path: polygon(49.94543% 0%, 49.146605% 0.56499168%, 47.908524% 1.8619327%, 46.53612% 3.2937721%, 45.334324% 4.2634587%, 44.449473% 4.6785326%, 43.75% 4.8902239%, 43.123985% 4.967017%, 42.459505% 4.9773959%, 32.434877% 4.9773959%, 22.41025% 4.9773959%, 12.385622% 4.9773959%, 2.3609941% 4.9773959%, 1.7494639% 5.0755373%, 0.9648305% 5.3952797%, 0.28803037% 5.9746007%, 0% 6.8514776%, 0% 29.608196%, 0% 52.364914%, 0% 75.121632%, 0% 97.87835%, 0.17916238% 98.658483%, 0.67451585% 99.313006%, 1.4228599% 99.763343%, 2.3609941% 99.930917%, 25.989505% 99.930917%, 49.618015% 99.930917%, 73.246526% 99.930917%, 96.875036% 99.930917%, 97.979739% 99.839309%, 98.960507% 99.515581%, 99.662509% 98.886379%, 99.930917% 97.87835%, 99.930917% 75.233185%, 99.930917% 52.588019%, 99.930917% 29.942854%, 99.930917% 7.2976888%, 99.75287% 6.3432143%, 99.283323% 5.6113835%, 98.619164% 5.1426321%, 97.857283% 4.9773959%, 87.768866% 4.9773959%, 77.680448% 4.9773959%, 67.592031% 4.9773959%, 57.503614% 4.9773959%, 56.936197% 4.9640164%, 56.17412% 4.8766449%, 55.305914% 4.6444314%, 54.420113% 4.1965263%, 53.323874% 3.214925%, 51.989005% 1.8085795%, 50.75102% 0.54707587%);
  }
  .cut2 {
    clip-path: polygon(49.94543% 0%, 49.631999% 0.12564846%, 49.187804% 0.4688613%, 48.640661% 0.97903993%, 48.018387% 1.605585%, 47.3488% 2.2978983%, 46.659716% 3.0053809%, 45.978952% 3.6774339%, 45.334324% 4.2634587%, 42.618384% 6.7500473%, 39.935164% 8.743094%, 37.227225% 10.296864%, 34.437125% 11.465622%, 31.507425% 12.303633%, 28.380682% 12.865161%, 24.999456% 13.204473%, 21.306307% 13.375833%, 18.127097% 13.266869%, 14.650937% 13.191619%, 11.100005% 13.527542%, 7.6964784% 14.652097%, 4.6625364% 16.942746%, 2.2203573% 20.776948%, 0.5921189% 26.532164%, 0% 34.585852%, 0% 39.201516%, 0% 43.81718%, 0% 48.432844%, 0% 53.048507%, 0% 57.664171%, 0% 62.279835%, 0% 66.895499%, 0% 71.511163%, 0.37122067% 75.655781%, 1.506588% 80.247442%, 3.4386599% 84.97803%, 6.1999946% 89.539433%, 9.8231496% 93.623537%, 14.340684% 96.922228%, 19.785154% 99.127392%, 26.189119% 99.930917%, 33.206023% 99.598265%, 38.745175% 98.670068%, 43.261202% 97.250968%, 47.208726% 95.445606%, 51.042372% 93.358623%, 55.216765% 91.094659%, 60.186528% 88.758356%, 66.406286% 86.454354%, 72.757944% 85.114156%, 78.860888% 84.911615%, 84.53075% 85.376904%, 89.58316% 86.040195%, 93.833751% 86.431657%, 97.098153% 86.081462%, 99.191998% 84.519782%, 99.930917% 81.276787%, 99.930917% 74.373149%, 99.930917% 67.469512%, 99.930917% 60.565874%, 99.930917% 53.662237%, 99.930917% 46.7586%, 99.930917% 39.854963%, 99.930917% 32.951325%, 99.930917% 26.047688%, 99.483948% 23.602291%, 98.249148% 21.274547%, 96.385677% 19.128688%, 94.052694% 17.228949%, 91.409359% 15.639561%, 88.614834% 14.424756%, 85.828276% 13.648769%, 83.208846% 13.375833%, 79.780489% 13.234012%, 76.02116% 12.843221%, 72.072026% 12.184289%, 68.074254% 11.238045%, 64.16901% 9.9853175%, 60.497461% 8.4069355%, 57.200773% 6.4837289%, 54.420113% 4.1965263%, 53.612432% 3.3746811%, 52.867835% 2.5981691%, 52.190258% 1.8867921%, 51.583637% 1.260352%, 51.051908% 0.73865107%, 50.599007% 0.34149057%, 50.228869% 0%);
  }
  .container {
    display: flex;
    height: 400px;
    justify-content: center;
    left: 50%;
    overflow: hidden;
    position: absolute;
    transform: translateX(-50%);
    transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);;
    width: 325px;
  }
  .dots{
    background-color: #0000005f;
    height: 1%;
  }
  .dot {
    background: #8ecae6;
    border-radius: 50%;
    height: 10px;
    margin-right: 5px;
    width: 10px;
  }
  .dot:last-child {
    margin-right: 0;
  }
  .drop {
    background: #8ecae6;
    border-radius: 1.2px;
    height: 5px;
    transform: translateY(5px);
    transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 5px;
  }
  .shadow {
        height: 440px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 365px;
  }
  .list {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: 120px;
    width: 325px;
  }
  .list ul {
    margin: 0;
    padding: 0;
  }
  .list li {
    align-items: center;
    border-bottom: 1px solid #bdbdbd;
    display: flex;
    font-size: 24px;
    height: 50px;
    margin-left: 40px;
    opacity: 0;
    list-style: none;
    transition: opacity 100ms cubic-bezier(0.4, 0.0, 0.2, 1);
    user-select: none;
    -moz-user-select: none;
  }
  .list li:hover {
    background: #f5f5f547;
  }
  .dots.active .container {
    transform: translateX(-50%) translateY(20px);
  }
  .dots.active .drop {
    transform: translateY(212px) scale(108);
  }
  .dots.active .list li {
    cursor: pointer;
    opacity: 1;
    transition: opacity 200ms 100ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  .dots.active .list li:nth-child(2) {
    transition-delay: 130ms;
  }
  .dots.active .list li:nth-child(3) {
    transition-delay: 160ms;
  }
  .dots.active .list li:nth-child(4) {
    transition-delay: 190ms;
  }
  .dots.active .list li:nth-child(5) {
    transition-delay: 220ms;
  }
  .dots.active .shadow {
    opacity: 1;
    transition: opacity 150ms 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  .cursor {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    height: 40px;
    position: absolute;
    top: 25px;
    width: 80px;
  }
a{
    text-decoration: none;
    color: #333;
}
/* Default background */
#wrapper {
    background: url('../../HTML-CSS-Projects/assets/dragonball.png');
    background-size: cover;
    display: flex;
    background-position: center;
    font-family: sans-serif;
    justify-content: center;
    margin: 0;
    width: 100vw;
    height: 100vh;
    transition: background 0.5s ease-in-out; /* Smooth transition */
}

/* Change background when clicking a link */
#DragonBall:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/dragonball.png');
    background-size: cover;
    background-position: center;
}
#SoloLeveling:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/sololeveling.jpg');
    background-size: cover;
    background-position: center;
}
#OnePiece:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/onepiece.png');
    background-size: cover;
    background-position: center;
}
#TokyoRevengers:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/tokyorevenger.jpg');
    background-size: cover;
    background-position: center;
}
#DemonSlayer:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/demonslayer.jpg');
    background-position: center;
    background-size: cover;
}
#JJK:target ~ #wrapper {
    background: url('../../HTML-CSS-Projects/assets/jujutsukaisen.jpg');
    background-size: cover;
    background-position: center;
}